<template>
    <div class="ele-body">
        <el-card shadow="never" body-style="padding:22px 22px 0 22px;">
            <div class="box">
                <el-steps :active="active" class="boxStep">
                    <el-step title="第一步" description="填写学生信息"></el-step>
                    <el-step title="第二步" description="填写请假时间"></el-step>
                    <el-step title="第三步" description="添加成功"></el-step>
                </el-steps>

                <el-form ref="formOne" :model="form" label-width="120px" class="boxForm" :rules="addRules">
                    <div v-show="upDown.flag==0">
                        <el-form-item label="请假类型：" prop="leave_id">
                            <el-select v-model="form.leave_id" placeholder="请选择请假类型" clearable class="ele-fluid">
                                <el-option
                                    v-for="item in leave_ids"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="学生姓名：" prop="name">
                            <el-input v-model="form.name" @blur="getNumbers" placeholder="请输入学生姓名"></el-input>
                        </el-form-item>

                        <el-form-item label="学号：" prop="number">
                            <el-select v-model="form.number" placeholder="请选择" clearable class="ele-fluid">
                                <el-option
                                    v-for="item in numbers"
                                    :key="item.id"
                                    :label="item.number"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-form>

                <el-form ref="formTwo" :model="form" label-width="120px" class="boxForm" :rules="addRules">
 
                    <div v-show="upDown.flag==1">
                        <el-form-item label="请假开始时间：" prop="startDate">
                            <el-date-picker
                            v-model="form.startDate"
                            type="datetime"
                            placeholder="选择日期时间"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            v-bind:default-value="startDate">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="请假结束时间：" prop="endDate">
                            <el-date-picker
                            v-model="form.endDate"
                            type="datetime"
                            placeholder="选择日期时间"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            v-bind:default-value="startDate">
                            </el-date-picker>  
                        </el-form-item>
                        <el-form-item label="请假事由">
                            <el-input type="textarea" placeholder="请输入请假事由" v-model="form.remark" rows="4"></el-input>
                        </el-form-item>
                    </div>

                    <el-form-item v-show="upDown.flag < 2">
                        <el-button type="primary" @click="upDownHandler">{{upDown.label}}</el-button>
                        <el-button v-show="upDown.flag" type="primary" @click="onSubmit">立即创建</el-button>
                    </el-form-item>

                </el-form>

                <div style="max-width: 900px; margin: 45px auto;" v-show="upDown.flag==2">
                    <ele-result title="提交成功"></ele-result>
                </div>

            </div>
        </el-card>
    </div>
</template>
<script>
export default {
    name: 'AddleaveRecord',
    data() {
        let date = this.$util.getToady();

        return {
            active: 0,
            form: {},
            startDate: date,
            endDate: date,
            upDown: {flag: 0, label: '下一步'},
            leave_ids: [],
            numbers: [],
            addRules: {
                leave_id: [
                    {required: true, message: '请选择请假类型', trigger: 'change'}
                ],
                name: [
                    {required: true, message: '请输入姓名', trigger: 'blur'}
                ],
                number: [
                    {required: true, message: '请输入编号', trigger: 'blur'}
                ],
                startDate: [
                    {required: true, message: '请选择请假开始时间', trigger: 'change'}
                ],
                endDate: [
                    {required: true, message: '请选择请假结束时间', trigger: 'change'}
                ]
            }
        }
    },

    created() {
         this.$http.get('/api/attend/student/leave/select').then(res => {
            if (res.data.code === 200) {
                this.leave_ids = res.data.result;
            } else {
                this.$message.error(res.data.msg);
            }
        }).catch(e => {
            this.$message.error(e.message);
        });
    },

    methods: {
        onSubmit() {
            this.$refs['formTwo'].validate((valid) => {
                if (valid) {
                    this.$http.post('/api/attend/student/leavelog/add', this.form).then(res => {
                        if (res.data.code === 200) {
                            this.active = 2;
                            this.upDown.flag = 2;
                            this.$message({type: 'success', message: res.data.msg});
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    }).catch(e => {
                        this.$message.error(e.message);
                    });
                } else {
                    return false;
                }
            });
        },

        upDownHandler() {
            if (this.upDown.flag == 0) {
                this.$refs['formOne'].validate((valid) => {
                    if (valid) {
                        if (this.form.userId == 0) {
                            this.$message.error('请输入一个可用的姓名');
                        } else {
                            this.active = 1;
                            this.upDown = {flag: 1, label: '上一步'};
                        }
                    } else {
                        return false;
                    }
                }); 
            } else {
                this.active = 0;
                this.upDown = {flag: 0, label: '下一步'};
            } 
        },

        getNumbers() {
            if (this.form.name) {
                this.$http.get('/api/attend/student/leavelog/getNumbers?name=' + this.form.name).then(res => {
                    if (res.data.code === 200) {
                        this.form.userId = res.data.result[0].id;
                        this.form.number = res.data.result[0].number;
                        this.numbers = res.data.result;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    this.$message.error(e.message);
                });
            }
        }
    }
}
</script>
<style scoped>
.box {
    width: 50%;
    margin: 20px auto;
}
.boxStep {
    margin-bottom: 30px;
}
.boxForm {
    width: 600px;
    margin: 0px auto;
}
</style>
